import { defineComponent } from 'vue';
import { useUserInfoStore } from '@/domain/authority/hooks/login';
import { Button, Popconfirm } from 'ant-design-vue';

export default defineComponent({
  name: 'headers',
  setup(props, { slots }) {
    const store = useUserInfoStore();

    return () => (
      <header class={'h-16 p-2 bg-gray-50'} style={{ boxShadow: '2px 2px 6px 0 hsl(0deg 0% 80% / 50%)', display: 'flex', alignItems: 'center' }}>
        {slots.default ? slots.default() : null}
        <div class={'text-xl ml-20'}></div>
        {store.state.isLoginStatus ? (
          <div class={'absolute right-4  pt-3  inline-block top-3  align-top'}>
            <span class={'text-xs mr-3'}>{store.state.userInfo?.account}</span>
            <Popconfirm
              title={`确定退出?`}
              ok-text="是"
              cancel-text="否"
              onCancel={() => {}}
              onConfirm={() => {
                store.toLoginOut();
              }}
            >
              <span class={'cursor-pointer'}>退出</span>
            </Popconfirm>
            {/* <a
              class="text-xs text-red-600"
              onClick={() => {
                store.toLoginOut();
              }}
            >
              退出
            </a> */}
          </div>
        ) : null}
      </header>
    );
  }
});
